import 'package:custompaint/bean/TabBean.dart';
import 'package:custompaint/page/main/logic.dart';
import 'package:custompaint/widget/CachePage.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ShapeWidget extends StatelessWidget {
  const ShapeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<MainLogic>();
    final state = logic.state;
    return Scaffold(body: Obx(() {
      return DefaultTabController(
        length: state.frames.length,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  const Text("桢："),
                  Expanded(
                    child: TabBar(
                      tabs: state.frames
                          .map((element) => Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text(element.animationsName),
                              ))
                          .toList(),
                      isScrollable: true,
                      onTap: (i) {
                        logic.pageController.animateToPage(i,
                            duration: const Duration(milliseconds: 200),
                            curve: Curves.linear);
                      },
                    ),
                  ),
                  InkWell(
                    onTap: logic.addAnimation,
                    child: const Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(Icons.add),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: Obx(() {
                if (state.frames.isEmpty) {
                  return const Center(child: Text("暂无桢"));
                }
                return PageView(
                  controller: logic.pageController,
                  onPageChanged: (p) {
                    state.pageIndex.value = p;
                    state.selectedFakeWidget.value = -1;
                  },
                  children: state.frames
                      .map((element) => AddWidgetsPage(
                            tabBean: element,
                          ))
                      .toList(),
                );
              }),
            ),
          ],
        ),
      );
    }));
  }
}

class AddWidgetsPage extends StatelessWidget {
  final TabBean tabBean;

  const AddWidgetsPage({super.key, required this.tabBean});

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<MainLogic>();
    final state = logic.state;
    return CachePage(
      child: Column(
        children: [
          Row(
            children: [
              ElevatedButton(
                  onPressed: () {
                    state.frames.remove(tabBean);
                  },
                  child: const Text("删除该桢")),
              ElevatedButton(
                  onPressed: () {
                    logic.addWidget(tabBean);
                  },
                  child: const Text("添加控件")),
            ],
          ),
          Expanded(
            child: Obx(() {
              return ListView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: tabBean.list.length,
                itemBuilder: (BuildContext context, int index) {
                  var bean = tabBean.list[index];
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Expanded(
                            child: InkWell(
                          onTap: () {
                            if (state.selectedFakeWidget.value != index) {
                              state.selectedFakeWidget.value = index;
                            } else {
                              state.selectedFakeWidget.value = -1;
                            }
                          },
                          child: Obx(() {
                            return Container(
                              decoration: BoxDecoration(
                                  border:
                                      state.selectedFakeWidget.value == index
                                          ? Border.all(
                                              color: Colors.grey,
                                            )
                                          : null),
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                bean.name.isEmpty == true
                                    ? "${bean.type.name}:${bean.uuid}"
                                    : '${bean.name}',
                                style: const TextStyle(),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            );
                          }),
                        )),
                        InkWell(
                          onTap: () {
                            var tabList = tabBean.list;
                            int index = tabList.indexOf(bean);
                            if (index >= 0 && index < tabList.length - 1) {
                              tabList.insert(
                                  index + 1, tabList.removeAt(index));
                            }
                          },
                          child: const Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Icon(Icons.arrow_downward_sharp),
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            var tabList = tabBean.list;
                            int index = tabList.indexOf(bean);
                            if (index > 0) {
                              tabList.insert(
                                  index - 1, tabList.removeAt(index));
                            }
                          },
                          child: const Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Icon(Icons.arrow_upward_sharp),
                          ),
                        ),
                        ElevatedButton(
                            onPressed: () {
                              var tabList = tabBean.list;
                              state.selectedFakeWidget.value = -1;
                              tabList.remove(bean);
                            },
                            child: const Text("删除"))
                      ],
                    ),
                  );
                },
              );
            }),
          ),
        ],
      ),
    );
  }
}
